<template>
	<view class="fee_main">
		<view class="fee_main_bgBox">
			<view class="money_detail">
				<p>结算到银行卡</p>
				<p class="mo_detail"><span style="font-size: 34rpx;">￥</span>{{((orderList.map(o=>o.oldWithdrawMoney).reduce((p,c)=>p+c,0)||0)-(detailObj.withdrawHandlingFeeStrategy==1?(orderList.map(o=>o.oldWithdrawMoney).reduce((p,c)=>p+c,0)*0.01*detailObj.handingFeeProportion||0):(detailObj.handingFeeFixedOrder*orderList.length||0))).toFixed(2)}}
				</p>
				<p
					:style="{color: detailObj.status==1||detailObj.status==2?'#e69103':detailObj.status==5?'#f56c6c':'#000'}">
					{{statusList.filter(o=>o.value==detailObj.status)[0].text}}</p>
			</view>
			<view class="item_fee">
				<view class="item_content">
					<span class="lable_tip">银行名称</span><span class="content_name">{{detailObj.name}}</span>
				</view>

				<view class="item_content">
					<span class="lable_tip">银行卡号</span><span class="content_name">{{detailObj.bankNo}}</span>
				</view>
				<view class="item_content">
					<span class="lable_tip">持卡人姓名</span><span class="content_name">{{detailObj.cardholderName}}</span>
				</view>
			</view>
			<view class="item_fee">
				<view class="item_content">
					<span class="lable_tip">结算单号</span><span class="content_name"
						style="font-weight: bold;">{{detailObj.code}}</span>
				</view>
				<view class="item_content">
					<span class="lable_tip">结算时间</span><span class="content_name">{{detailObj.createTime}}</span>
				</view>

				<view class="item_content">
					<span class="lable_tip">审核时间</span><span class="content_name">{{detailObj.checkTime}}</span>
				</view>
				<view class="item_content">
					<span class="lable_tip">审核人员</span><span class="content_name">{{detailObj.checkEmp}}</span>
				</view>

			</view>
			<view class="item_fee">
				<view class="item_content">
					<span class="lable_tip">工单数量</span><span class="content_name">{{orderList.length}}</span>
				</view>
				<view class="item_content">
					<span class="lable_tip">总工单金额</span><span class="content_name"
						style="font-weight: bold;">￥{{(orderList.map(o=>o.oldWithdrawMoney).reduce((p,c)=>p+c,0)||0).toFixed(2)}}</span>
				</view>
				<view class="item_content">
					<span class="lable_tip">总手续费</span><span class="content_name"
						style="font-weight: bold;">￥{{detailObj.withdrawHandlingFeeStrategy==1?(orderList.map(o=>o.oldWithdrawMoney).reduce((p,c)=>p+c,0)*0.01*detailObj.handingFeeProportion||0).toFixed(2):(detailObj.handingFeeFixedOrder*orderList.length||0).toFixed(2)}}</span>
				</view>
				<view class="item_content">
					<span class="lable_tip">申请备注</span><span class="content_name">{{detailObj.applyRemark}}</span>
				</view>
				<view class="item_content">
					<span class="lable_tip">审核备注</span><span class="content_name">{{detailObj.checkRemark}}</span>
				</view>
			</view>
			<view class="item_fee">
				<view class="item_fee_tableHead" @click="showOrder">
					已选工单({{orderList.length}})<span :class="isShow? 'down_up_':'down_up'"></span>
				</view>
				<view class="order_sele_info" v-if="!isShow">
					<view class="order_sele_info_item" v-for="item in orderList" :key="item.id">
						<view class="order_info_item">
							<view class="content_info">
								<span class="label">工单单号：</span>
								<span class="value"  @click="goDetail(item.workId)"
									style="color: #007cff;">{{item.workNo}}</span>
							</view>
							<view class="content_info">
								<span class="label">工单金额：</span>
								<span class="value"
									style="font-weight: bold;">￥{{(item.oldWithdrawMoney||0).toFixed(2)}}</span>
							</view>
							<view style="display: flex;column-gap: 24rpx;">
								<view class="content_info">
									<span class="label">实际到账：</span>
									<span class="value"
										style="font-weight: bold;">￥{{((item.withdrawMoney||0)-(detailObj.withdrawHandlingFeeStrategy==1? (item.oldWithdrawMoney*0.01*detailObj.handingFeeProportion||0):(detailObj.handingFeeFixedOrder||0))).toFixed(2)}}</span>
								</view>
								<view class="content_info">
									<span class="label">手续费：</span>
									<span class="value"
										style="font-weight: bold;">￥{{detailObj.withdrawHandlingFeeStrategy==1? (item.oldWithdrawMoney*0.01*detailObj.handingFeeProportion||0).toFixed(2):(detailObj.handingFeeFixedOrder||0).toFixed(2)}}</span>
								</view>
							</view>
							<view class="content_info">
								<span class="label">工程师名称：</span>
								<span class="value">{{item.engineer}}</span>
							</view>
							<view class="content_info">
								<span class="label">工程师手机号：</span>
								<span class="value">{{item.engineerPhone}}</span>
							</view>
						</view>
						<!-- <view class="order_info_item">
							<view class="content_info">
								<span>手续费：</span><span
									style="font-weight: bold;">￥{{detailObj.withdrawHandlingFeeStrategy==1? (item.oldWithdrawMoney*0.01*detailObj.handingFeeProportion||0).toFixed(2):(detailObj.handingFeeFixedOrder||0).toFixed(2)}}</span>
							</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref, onMounted, reactive, watch, nextTick
	} from "vue";
	import _ from "lodash"
	import { onUnload, onShow, onLoad, onHide } from '@dcloudio/uni-app'
	import apiAccount from '@/util/network_api/account.js'
	const workId = ref(null)//工单Id
	const detailObj = ref({
		"id": '',
		"code": '',
		"status": 0,
		"name": '',
		"bankNo": '',
		"openingBank": "",
		"cardholderName": '',
		"applyNetworkEmp": '',
		"applyRemark": '',
		"withdrawHandlingFeeStrategy": 1,
		"handingFeeProportion": 0.00,
		"handingFeeFixedOrder": 0.00,
		"checkEmpId": '',
		"checkEmp": '',
		"checkTime": '',
		"checkRemark": "",
		"createTime": null
	})
	const orderList = ref([])
	// 结算状态
	const statusList = ref([
		{ text: '全部状态', value: 0 },
		{ text: '结算审核', value: 1 },
		{ text: '等待打款', value: 2 },
		{ text: '已完成', value: 3 },
		// { text: '失败', value: 4 },
		{ text: '已驳回', value: 5 }
	])
	// 张开显示
	const isShow = ref(true)
	const showOrder = () => {
		isShow.value = !isShow.value
	}
	onLoad(async (e) => {
		workId.value = e.id
		if (!e.id) return
		getWithdrawRecordDetail(workId.value)
		getWithdrawOrderList(workId.value)
	})
	// 获取详情
	const getWithdrawRecordDetail = (id) => {
		uni.showLoading({
			title: '加载中',
		});
		apiAccount.getWithdrawRecordDetail(id).then(res => {
			if (res.success) {
				detailObj.value = res.data.row
			}
			uni.hideLoading()
		})
	}
	// 获取结算工单
	const getWithdrawOrderList = (id) => {
		apiAccount.getWithdrawOrderList(id).then(res => {
			if (res.code == 20000) {
				orderList.value = res.data.rows
			}
		})
	}
	onUnload(() => {
		uni.hideLoading()
	})
	const goDetail = (id) => {
		uni.navigateTo({
			url: "/pages/pages_network/order/detail?workId=" + id
		})
	}
</script>

<style lang="scss" scoped>
	.fee_main {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		width: 100%;
		background: #fafafa;
		display: flex;
		flex-direction: column;
		overflow: auto;

		&::-webkit-scrollbar {
			width: 0;
			height: 0;
			background-color: transparent;
		}

		&_bgBox {
			margin: 28rpx;
			padding: 24rpx;
			padding-bottom: 10vh;
			background-color: #fff;

			.money_detail {
				padding: 0 24rpx 24rpx;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				gap: 12rpx;

				.mo_detail {
					font-size: 46rpx;
					font-weight: bold;
				}
			}

			&:first-child .item_fee {
				border-top: 2rpx solid #eee;
			}

			.item_fee {
				display: flex;
				flex-direction: column;
				padding: 12rpx 0;

				&~.item_fee {
					border-top: 2rpx solid #eee;
				}

				&_tableHead {
					display: flex;
					align-items: center;
					margin: 24rpx 0 0;
					font-weight: bold;
					font-size: 28rpx;

					.down_up {
						width: 0;
						height: 0;
						border-right: 10rpx solid transparent;
						border-left: 10rpx solid transparent;
						border-top: 12rpx solid #000;
						margin-left: 4rpx;
						margin-top: 4rpx;
					}

					.down_up_ {
						width: 0;
						height: 0;
						border-right: 10rpx solid transparent;
						border-left: 10rpx solid transparent;
						border-bottom: 12rpx solid #000;
						margin-left: 4rpx;
						margin-top: 4rpx;
					}
				}

				.item_content {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					font-size: 28rpx;
					padding: 12rpx 0;
					width: 100%;

					.lable_tip {
						color: #606266;
					}

					.content_name {
						flex: 1;
						text-align: right;
						margin-left: 32rpx;
						word-wrap: break-word;
						word-break: break-all;
					}
				}

				.order_sele_info {
					&_item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 28rpx;

						.order_info_item {
							display: flex;
							flex-direction: column;
							justify-content: space-evenly;
							padding: 12rpx 0;
							row-gap: 5px;

							.content_info {
								display: flex;

								.label {
									// width: 196rpx;
									text-align: right;
								}

								.value {
									// width: 100%;
								}
							}
						}
					}

					.order_sele_info_item~.order_sele_info_item {
						border-top: 2rpx solid #eee;
					}
				}
			}
		}
	}
</style>